<template>
  <v-container fluid fill-height class="statistics-wrapper">
    <v-layout row wrap>
      <v-flex md12>
        <v-tabs v-model="tabs" fixed-tabs color="transparent" slot="extension" @input="getGameClicked">
          <v-tabs-slider color="primary"></v-tabs-slider>
          <v-tab v-for="(item, index) in toggleItems" :key="index" :href="`#${item.gameId}`" class="primary--text">
            <span class="title">{{ item.text }}</span>
          </v-tab>
        </v-tabs>
      </v-flex>
      <v-flex md12>
        <v-layout row wrap>
          <v-flex md12 v-if="nodata">
            <h1 class="py-5 title text-md-center">暂无数据</h1>
          </v-flex>
          <v-flex d-flex md12 class="mt-5">
              <div id="mychart" style="width: 800px;height:600px;"></div>
          </v-flex>
        </v-layout>
      </v-flex>
    </v-layout>
  </v-container>
</template>

<script>
import * as statistics from "../../api/statistics";

import echarts from "echarts";
import GameConfig from "./gameconfig";
export default {
  data: () => ({
    tabs: null,
    dialog: false,
    chartData: null,
    mychart: null,
    nodata: false,
    option: {
      color: [
        "#D32F2F",
        "#FFA000",
        "#FFEA00",
        "#1DE9B6",
        "#1565C0",
        "#0288D1",
        "#283593",
        "#512DA8",
        "#78909C",
        "#8E24AA",
        "#607d8b"
      ],
      tooltip: {
        trigger: "item",
        formatter: "{b} : {c} <br /> ({d}%)",
        backgroundColor: "#333",
        extraCssText: "box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);",
        axisPointer: {
          animation: false
        }
      },
      legend: {
        bottom: 10,
        left: "center",
        data: []
      },
      series: [
        {
          type: "pie",
          radius: "80%",
          center: ["50%", "50%"],
          selectedMode: "single",
          itemStyle: {
            emphasis: {
              shadowBlur: 16,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.7)"
            }
          },
          data: []
        }
      ]
    },
    toggleItems: [
      {
        text: "经典斗牛",
        value: 1,
        gameId: "bullfight",
        url: "classic-bull.png"
      },
      {
        text: "斗公牛",
        value: 2,
        gameId: "oxbullfight",
        url: "fight-bull.png"
      },
      // { text: "点子牛", value: 5, gameId: "dianziniu", url: "dianzi-bull.png" },

      { text: "跑得快", value: 8, gameId: "runfast", url: "runfast.png" },
      { text: "欢乐金花", value: 4, gameId: "jinhua", url: "jinhua.png" },
      {
        text: "红中麻将",
        value: 3,
        gameId: "hongzhong",
        url: "hz-majiang.png"
      },
      {
        text: "平江扎鸟",
        value: 11,
        gameId: "pjmahjong",
        url: "pj-majiang.png"
      },
      {
        text: "长沙麻将",
        value: 10,
        gameId: "csmahjong",
        url: "cs-majiang.png"
      },
      { text: "三公", value: 6, gameId: "sangong", url: "sangong.png" }
    ]
  }),
  mounted() {
    // 获取到对应的游戏类型
    this.getRoomInfo(1);
    this.mychart = echarts.init(document.getElementById("mychart"));
    this.mychart.setOption(this.option);
    this.$nextTick(() => {
      $Vue.$off("refreshPage");
      $Vue.$on("refreshPage", () => {
    this.getRoomInfo(1);
      });
      $Vue.$off("areaCodeChange");
      $Vue.$on("areaCodeChange", () => {
    this.getRoomInfo(1);
      });
    });
  },
  methods: {
    // 获取房间信息
    getRoomInfo(type) {
      statistics.getMethodsData.r({ type: type }).then(({ data }) => {
        console.log((data))
        if(data){

        }
        if (data.result === 0) {
          this.convertToChartData(data.data.dataList[0]);
          this.getGameClicked();
          this.nodata = false;
        } else {
          this.nodata = true;
        }
      });
    },
    getGameClicked() {
      if (
        JSON.stringify(this.chartData) !== "null" &&
        this.chartData[this.tabs.toLowerCase()] !== undefined
      ) {
        let legend = this.chartData[this.tabs.toLowerCase()].LEGEND_ARRAY;
        let data = this.chartData[this.tabs.toLowerCase()].DATA_ARRAY;
        let option = {
          legend: {
            data: legend
          },
          series: [{ data: data }]
        };
        this.mychart.setOption(option);
      }
    },
    convertToChartData(data) {
      // 需保持GameConfig的不变性
      this.chartData = Object.assign({}, GameConfig);
      let finalData = _.map(data, (value, key) => {
        // 初始化数据数组
        this.chartData[key]["DATA_ARRAY"] = [];
        // 初始化legend 显示数组
        this.chartData[key]["LEGEND_ARRAY"] = [];
        _.map(this.chartData[key], (subVal, subKey) => {
          if (subVal.name) {
            subVal.value = value[subKey];
            this.chartData[key]["DATA_ARRAY"].push(subVal);
            this.chartData[key]["LEGEND_ARRAY"].push(subVal.name);
          }
        });
      });
    },
    initialize() {
      this.limit = 5;
      this.offset = 0;
      // this.tabs = 1;
      // 初始化页面信息
      this.getRoomInfo(1);
    }
  }
};
</script>

<style lang="less" scoped>
</style>

